<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>write</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">

            function insertHtmlAtCursor(html) {
                var range, node;
                var hasSelection = window.getSelection;
                var selection = window.getSelection();
                if (hasSelection && selection.rangeCount > 0 && selection.getRangeAt) {
                    range = window.getSelection().getRangeAt(0);

                    range.cloneRange()

                    var element = document.createElement('p');
                    element.innerHTML = html;
                    var nodes = element.childNodes;
                    var l = nodes.length;
                    for (var i = 0; i < l; i++) {
                        node = nodes[i];
                        range.insertNode(node);
                    }
                    //node = range.createContextualFragment(html);
                    //range.insertNode(node);
                    if (node) {
                        range.setStartAfter(node);// 光标移动到到原来的位置加上新内容的长度
                        range.collapse(true);// 光标开始和光标结束重叠
                        selection.removeAllRanges();// 清除选定对象的所有光标对象
                        selection.addRange(range);// 插入新的光标对象
                    }
                } else if (document.selection && document.selection.createRange) {
                    document.selection.createRange().pasteHTML(html);
                } else {
                    var element = document.createElement('div');
                    element.innerHTML = html;
                    node = element.childNodes[0];
                    document.body.appendChild(node);
                }
            }
            // insertHtmlAtCursor('hhh');
            function insertHtml() {

                var position=getScrollPosition();


                var html = document.getElementById("html_text").value;
                if (html) {
                    insertHtmlAtCursor(html);
                }

                if(position=="bottom"){
                    scrollToBottom();
                }

            }

            function getScrollPosition() {
                var body=document.body;
                var doc=document.documentElement;

                var height = doc.scrollHeight;
                var top = body.scrollTop;

                var clientHeight =doc.clientHeight;
                var position="";

                var a=(height - top);
                var b=(clientHeight + 50);

                if (a<b) {
                    position = "bottom";
                } else if (top == 0) {
                    position = "top";
                } else {
                    position = "middle";
                }
                return position;
            }

            function scrollToBottom() {
                var body=document.body;
                var height = body.scrollHeight;
                body.scrollTop=height;
            }
        </script>
    </head>
    <body style="word-wrap:break-word;font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';;font-size:12px;margin-top:0;color:#000000;">
        <div contenteditable="true"></div>
        <input id="html_text" type="text">
        <button onclick="insertHtml()" >add</button>
        <div contenteditable="true"></div>
    </body>
</html>
